<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta name="referrer" content="no-referrer" />
    <!-- icon图标 -->
    <link rel="icon" href="./static/image/kkb.png">
    <!-- swiper插件 -->
    <link rel="stylesheet" href="./static/swiper/swiper-bundle.min.css">
    <script src="./static/swiper/swiper-bundle.min.js"></script>
    <!-- 全局样式 -->
    <link rel="stylesheet" href="./static/style.css">
    <!-- 弹性布局 -->
    <script src="./static/flexable.js"></script>
    <!-- Vue3.0 -->
    <script src="https://unpkg.com/vue@next"></script>


</head>

<body>
    <div id="app">
        <!-- 视频翻页 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <!-- 播放按钮 -->
                    <img class="play-btn" src="./static/image/play.png" alt="">

                    <!-- 头像 -->
                    <img class="author" alt="" srcset="">
                    <!-- 获得赞的数量 -->
                    <div class="reward-num">
                        <img src="./static/image/active.png" alt="" srcset="">
                        <p>123</p>
                    </div>

                    <!-- 点赞出现的心 -->
                    <div class="hearts">
                        <img src="./static/image/active.png" alt="">
                    </div>

                    <video x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true"
                        playsinline="true" x5-playsinline></video>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <footer>
            <ul>
                <li>首页</li>
                <li>朋友</li>
                <li><img src="./static/image/kkb.png" alt=""></li>
                <li>消息</li>
                <li>我</li>
            </ul>
        </footer>

    </div>
</body>

</html>